<template>
	<view class="container">
		<!-- 团队统计 -->
		<view class="team-stats">
			<view class="stats-item">
				<text class="value">{{teamStats.total}}</text>
				<text class="label">团队总人数</text>
			</view>
			<view class="stats-item">
				<text class="value">{{teamStats.level1}}</text>
				<text class="label">一级分销商</text>
			</view>
			<view class="stats-item">
				<text class="value">{{teamStats.level2}}</text>
				<text class="label">二级分销商</text>
			</view>
			<view class="stats-item">
				<text class="value">{{teamStats.level3}}</text>
				<text class="label">三级分销商</text>
			</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view 
				class="filter-item" 
				v-for="(item, index) in filterOptions" 
				:key="index"
				:class="{ active: currentFilter === item.value }"
				@tap="switchFilter(item.value)"
			>
				<text>{{item.label}}</text>
			</view>
		</view>
		
		<!-- 成员列表 -->
		<scroll-view 
			scroll-y 
			class="member-list"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view 
				class="member-item" 
				v-for="(item, index) in memberList" 
				:key="index"
			>
				<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
				<view class="info">
					<view class="name-wrap">
						<text class="nickname">{{item.nickname}}</text>
						<text class="level">{{item.level}}</text>
					</view>
					<view class="data-wrap">
						<text class="data-item">订单：{{item.orderCount}}</text>
						<text class="data-item">佣金：¥{{item.commission}}</text>
					</view>
				</view>
				<view class="join-time">
					<text>加入时间：{{item.joinTime}}</text>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="memberList.length === 0">
				<image src="/static/images/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无团队成员</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 团队统计
const teamStats = ref({
	total: 128,
	level1: 32,
	level2: 64,
	level3: 32
})

// 筛选选项
const filterOptions = [
	{ label: '全部', value: 'all' },
	{ label: '一级分销商', value: 'level1' },
	{ label: '二级分销商', value: 'level2' },
	{ label: '三级分销商', value: 'level3' }
]

// 当前筛选条件
const currentFilter = ref('all')

// 是否正在刷新
const isRefreshing = ref(false)

// 是否还有更多数据
const hasMore = ref(true)

// 成员列表
const memberList = ref([
	{
		avatar: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1nx2Xh2Z9tP_!!6000000005155-0-tps-1316-736.jpg',
		nickname: '张三',
		level: '一级分销商',
		orderCount: '128',
		commission: '1234.56',
		joinTime: '2024-01-01'
	},
	{
		avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01F0MA5j1zXb0XcYV1F_!!6000000006733-0-tps-1316-736.jpg',
		nickname: '李四',
		level: '二级分销商',
		orderCount: '64',
		commission: '789.12',
		joinTime: '2024-01-15'
	},
	{
		avatar: 'https://img.alicdn.com/imgextra/i3/O1CN01Z5paLt1goYDdHEzSU_!!6000000004150-0-tps-1316-736.jpg',
		nickname: '王五',
		level: '三级分销商',
		orderCount: '32',
		commission: '456.78',
		joinTime: '2024-02-01'
	}
])

// 切换筛选条件
const switchFilter = (value) => {
	currentFilter.value = value
	// 重置列表并重新加载
	memberList.value = []
	hasMore.value = true
	loadMembers()
}

// 加载成员列表
const loadMembers = () => {
	// 这里可以添加根据筛选条件加载成员列表的接口调用
}

// 加载更多
const loadMore = () => {
	if (!hasMore.value) return
	
	// 这里可以添加加载更多成员的接口调用
	setTimeout(() => {
		hasMore.value = false
	}, 1000)
}

// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true
	// 重置列表并重新加载
	memberList.value = []
	hasMore.value = true
	
	setTimeout(() => {
		isRefreshing.value = false
		loadMembers()
	}, 1000)
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
}

/* 团队统计样式 */
.team-stats {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.stats-item {
	flex: 1;
	text-align: center;
}

.stats-item .value {
	font-size: 36rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.stats-item .label {
	font-size: 24rpx;
	color: #999;
}

/* 筛选栏样式 */
.filter-bar {
	display: flex;
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
}

.filter-item {
	flex: 1;
	text-align: center;
	padding: 10rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.filter-item.active {
	color: #D02B29;
	font-weight: bold;
}

.filter-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #D02B29;
	border-radius: 2rpx;
}

/* 成员列表样式 */
.member-list {
	height: calc(100vh - 300rpx);
}

.member-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	margin-right: 20rpx;
}

.info {
	flex: 1;
}

.name-wrap {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.nickname {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-right: 20rpx;
}

.level {
	font-size: 24rpx;
	color: #D02B29;
	background-color: #FFF5F5;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.data-wrap {
	display: flex;
	align-items: center;
}

.data-item {
	font-size: 24rpx;
	color: #666;
	margin-right: 30rpx;
}

.join-time {
	font-size: 24rpx;
	color: #999;
}

/* 加载更多样式 */
.loading-more, .no-more {
	text-align: center;
	padding: 20rpx 0;
	font-size: 24rpx;
	color: #999;
}

/* 空状态样式 */
.empty-state {
	padding: 100rpx 0;
	text-align: center;
}

.empty-img {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style> 